<template>
	<view class="baoming">
		<block v-if="detail.checkState == 2 && detail.openExchange == 'no'">
			<div class="baoming8">您的信息已通过官方资质认证</div>
			<div class="baoming9">可开通在线交流功能</div>
		</block>
		<block v-else>
			<div class="baoming1">外滩大会产业对接会</div>
			<div class="baoming2" v-if="detail.checkState == 1">
				<image class="img" src="https://static.inclusionconf.com/static/images/chat/status-icon-new1.png" mode="" mode="aspectFit"></image>
				<div class="span">您已提交报名，审核中…</div>
			</div>
			<div class="baoming2" v-if="detail.checkState == 2">
				<image class="img" src="https://static.inclusionconf.com/static/images/chat/status-icon-new2.png" mode="" mode="aspectFit"></image>
				<div class="span">您已通过官网报名参加！</div>
			</div>
			<div class="baoming2" v-if="detail.checkState == 3">
				<image class="img" src="https://static.inclusionconf.com/static/images/chat/status-icon-new3.png" mode="" mode="aspectFit"></image>
				<div class="span">审核失败，请重新确认信息</div>
			</div>
		</block>
		<div class="baoming3">
			<div class="baoming3-top">
				<image class="img" src="https://static.inclusionconf.com/other/2024-08-29/10e4e685fa77436ea09a815e17402710.jpg" mode="" mode="aspectFit"></image>
				<div class="baoming3-top-title">您的“在线交流”名片</div>
				<div class="name">{{ detail.personName }}</div>
				<div class="position">{{ detail.positionValue }}</div>
			</div>
			<div class="company">{{ detail.companyName }}</div>
			<div class="list">
				<div class="item">
					<div class="left">行业：</div>
					<div class="right">{{ detail.industryValue }}</div>
				</div>
				<div class="item" v-if="showDirection == 'yes'">
					<div class="left">参会目的</div>
					<div class="right" v-if="detail.fieldDirection">
						<div class="right-item" v-for="(item, index) in detail.fieldDirectionList" :key="index">{{ item['name' + En] }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="baoming5" v-if="detail.checkState == 2 && detail.openExchange == 'no'">
			<div class="text">是否向其他用户展示参会目的</div>
			<div class="img"><wsh-switch v-model="showDirection" @input="switchChange"></wsh-switch></div>
		</div>
		<!-- <div class="baoming6" v-if="detail.checkState == 2 && detail.openExchange == 'no'">
			参加产业对接会将开启建联，您的名片将展示给他人，<br>
			同时您也可查看他人名片。
		</div> -->
		<div style="flex: 1;"></div>
		<div class="baoming4" v-if="detail.checkState == 3" @click="updateCard">重新提交</div>
		<div class="baoming7" v-if="detail.checkState == 2 && detail.openExchange == 'no'">
			<div class="btn" @click="close">暂不开通</div>
			<div class="btn on" @click="submit">开通</div>
		</div>
	</view>
</template>

<script>
	import protal from "@/api/protal"

	export default {
		props: {
			detail: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				showDirection: 'yes'
			}
		},
		created() {
			this.showDirection = this.detail.showDirection
		},
		methods: {
			close() {
				uni.navigateTo({
					url: '/pages/xingcheng/helperSec'
				})
			},
			submit() {
				protal.businesscardupdateExchangeStatus('yes').then(res => {
					if (res.code == '0000') {
						this.$emit('refresh')
					}
				})
			},
			updateCard() {
				uni.navigateTo({
					url: '/pages/business/card?update=1'
				})
			},
			switchChange(v) {
				protal.businesscardupdateShowDirectionStatus(v).then(res => {
					if (res.code == '0000') {
						this.$emit('refresh')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baoming {
		min-height: 100%;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		background-color: #8E6AFF;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.baoming1 {
			padding-top: 60px;
			font-family: inClusionFont;
			font-size: 26px;
			color: #FFFFFF;
			line-height: 26px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.baoming2 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 18px 0 30px;

			.img {
				width: 20px;
				height: 20px;
				margin-right: 6px;
			}

			.span {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 18px;
				text-align: right;
				font-style: normal;
			}
		}

		.baoming3 {
			width: 670rpx;
			background: #1E234B;
			border-radius: 12px;
			margin: 0 auto;

			.baoming3-top {
				position: relative;
				padding: 30px 0 0 20px;

				.baoming3-top-title {
					font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
					font-weight: 400;
					font-size: 9px;
					color: rgba(255, 255, 255, 0.6);
					font-style: normal;
					text-transform: none;
					margin-bottom: 16px;
				}

				.img {
					position: absolute;
					right: 20px;
					top: 26px;
					width: 74px;
					height: 74px;
					border-radius: 10px;
					border: 2px solid #fff;
					box-sizing: border-box;
				}

				.name {
					font-family: AlibabaPuHuiTi_3_75_SemiBold;
					font-size: 20px;
					color: #FFFFFF;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}

				.position {
					margin-top: 16px;
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 13px;
					color: rgba(255, 255, 255, 0.6);
					line-height: 13px;
					text-align: left;
					font-style: normal;
					padding-bottom: 9px;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						width: 20px;
						height: 2px;
						background: #7C5CFF;
					}
				}
			}

			.company {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 18px;
				color: #FFFFFF;
				line-height: 16px;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
				padding: 0 20px;
				margin: 39px 0 10px;
			}

			.list {
				padding-bottom: 6px;

				.item {
					width: 590rpx;
					margin: 0 auto;
					display: flex;
					margin-bottom: 30px;

					.left {
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 13px;
						color: rgba(255, 255, 255, 0.49);
						line-height: 13px;
						font-style: normal;
						flex: 0 0 64px;
					}

					.right {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 13px;
						color: #FFFFFF;
						line-height: 13px;
						text-align: left;
						font-style: normal;
						display: flex;
						flex-wrap: wrap;

						.right-item {
							padding: 0 11px;
							border-radius: 10px;
							height: 18px;
							border: 1px solid rgba(255, 255, 255, 0.28);
							margin: 0 2px 5px 0;
							font-size: 12px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

		}

		.baoming4 {
			margin: 40px auto;
			width: 200px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #fff;
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 16px;
			font-style: normal;
			border-radius: 20px;
		}

		.baoming5 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 11px 0;

			.text {
				font-family: AlibabaPuHuiTi_3_75_SemiBold;
				font-size: 13px;
				color: #FFFFFF;
				line-height: 18px;
				text-align: center;
				font-style: normal;
				margin-right: 8px;
			}

			.img {
				width: 59px;
				height: auto;
			}
		}

		.baoming6 {
			width: 630rpx;
			margin: 0 auto;
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 13px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 18px;
			text-align: center;
			font-style: normal;
		}

		.baoming7 {
			margin: 76px auto 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 260rpx;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #fff;
				font-family: AlibabaPuHuiTi_3_75_SemiBold;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 16px;
				font-style: normal;
				border-radius: 20px;
				margin: 0 5px;

				&.on {
					background-color: #fff;
					border-color: #fff;
					color: #7350F5;
				}
			}
		}
	}

	.baoming8 {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 60px;
		margin: 0 0 6px;
		font-family: AlibabaPuHuiTi_3_55_Regular;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 18px;
		text-align: right;
		font-style: normal;
	}

	.baoming9 {
		font-family: inClusionFont;
		font-size: 26px;
		color: #FFFFFF;
		line-height: 26px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 62px;
	}
</style>